<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <meta content="no-cache" http-equiv="Cache-Control" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="telephone=no" name="format-detection" />
  <title>好友列表</title>
  <link rel="stylesheet" href="../css/weui.min.css">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/sort.css">
</head>
<body>
<div class="weui-mask loading-bg"></div>
<div class="main" id="main">
  <!--<div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="ID/昵称/备注" required/>
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText">
        <i class="weui-icon-search"></i>
        <span>ID/昵称/备注</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>-->

  <div class="search-bar weui-flex">
    <div class="input-block weui-flex">
      <img src="../img/icon-search.png">
      <input class="weui-flex__item" type="text" placeholder="搜索好友ID/昵称（非好友暂不支持）" v-model="searchKey" @input="getFriendList">
      <img src="../img/icon-remove.png" v-show="searchKey" @click="searchKey = '';getFriendList()">
    </div>
  </div>
  <div class="marry-title weui-flex hairline-bottom">
    <div class="weui-flex__item"></div>
    <div class="right-title weui-flex">
      <div class="weui-flex__item">诚信分</div>
      <div class="weui-flex__item">ta配我</div>
      <div class="weui-flex__item">我配ta</div>
    </div>
  </div>
  <div id="letter"></div>

  <div class="search-user-list" v-show="searchKey != ''">
    <div class="user-item weui-flex hairline-bottom" v-for="item in friendList" @click="createChat(item)">
      <img src="../img/default-header.png" :data-src="item.HeadImgUrl" @click.stop.prevent="jumpToUserDetail(item.openid, item.IsBlack)">
      <div class="right-block weui-flex weui-flex__item friends">
        <div class="username num_name">{{item.NickName}}</div>
        <div class="right-value weui-flex">
          <div class="weui-flex__item">{{item.Sincerity == 0 ? '' : item.Sincerity + '分'}}</div>
          <div class="weui-flex__item">{{formatNum(item.ToMe * 100)}}%</div>
          <div class="weui-flex__item">{{formatNum(item.ToTa * 100)}}%</div>
        </div>
        <div class="user-attr weui-flex">
          <div class="item" v-if="item.age">{{item.age}}岁</div>
          <div class="item" v-if="item.constellation">{{item.constellation}}座</div>
          <div class="item" v-if="item.cityAttr">{{item.cityAttr}}</div>
        </div>
        <div class="info-num">{{item.Introduction}}</div>
        <div class="right-btns">
          <button class="ac-button black-color" @click.stop.prevent="createBlack(item.openid)">拉黑</button>
        </div>
      </div>
    </div>
    <div class="no-data" v-if="friendList.length == 0">
      <img src="../img/no-data.png">
      <span>没找到对应的好友</span>
    </div>
  </div>

  <div class="user-list" @scroll="scrollList" v-show="searchKey == ''">
    <div class="user-item weui-flex hairline-bottom" v-for="item in friendList" @click="createChat(item)">
      <img src="../img/default-header.png" :data-src="item.HeadImgUrl" @click.stop.prevent="jumpToUserDetail(item.openid, item.IsBlack)">
      <div class="right-block weui-flex weui-flex__item friends">
        <div class="username num_name">{{item.NickName}}</div>
        <div class="right-value weui-flex">
          <div class="weui-flex__item">{{item.Sincerity == 0 ? '' : item.Sincerity + '分'}}</div>
          <div class="weui-flex__item">{{formatNum(item.ToMe * 100)}}%</div>
          <div class="weui-flex__item">{{formatNum(item.ToTa * 100)}}%</div>
        </div>
        <div class="user-attr weui-flex">
          <div class="item" v-if="item.age">{{item.age}}岁</div>
          <div class="item" v-if="item.constellation">{{item.constellation}}座</div>
          <div class="item" v-if="item.cityAttr">{{item.cityAttr}}</div>
        </div>
        <div class="info-num">{{item.Introduction}}</div>
        <div class="right-btns">
          <button class="ac-button black-color" @click.stop.prevent="createBlack(item.openid)">拉黑</button>
        </div>
      </div>
    </div>
    <div class="user-item weui-flex hairline-bottom" v-for="item in blackList" @click="createChat(item, 'T')">
      <img src="../img/default-header.png" :data-src="item.HeadImgUrl" @click.stop.prevent="jumpToUserDetail(item.openid, item.IsBlack)">
      <div class="right-block weui-flex weui-flex__item blacklist">
        <div class="username num_name">{{item.NickName}}</div>
        <div class="right-value weui-flex">
          <div class="weui-flex__item">{{item.Sincerity == 0 ? '' : item.Sincerity + '分'}}</div>
          <div class="weui-flex__item">{{formatNum(item.ToMe * 100)}}%</div>
          <div class="weui-flex__item">{{formatNum(item.ToTa * 100)}}%</div>
        </div>
        <div class="user-attr weui-flex">
          <div class="item" v-if="item.age">{{item.age}}岁</div>
          <div class="item" v-if="item.constellation">{{item.constellation}}座</div>
          <div class="item" v-if="item.cityAttr">{{item.cityAttr}}</div>
        </div>
        <div class="info-num">{{item.Introduction}}</div>
        <div class="right-btns">
          <button class="ac-button" :class="{ 'hold-him-color': item.IsFriend != 'F' }" @click.stop.prevent="deleteBlack(item.BlackId)">{{item.IsFriend == 'F' ? '加ta' : '撤回'}}</button>
        </div>
      </div>
    </div>
    <div class="user-item weui-flex hairline-bottom" v-for="item in receiveList"  @click="jumpToMB(item.openid)">
      <img src="../img/default-header.png" :data-src="item.HeadImgUrl" @click.stop.prevent="jumpToUserDetail(item.openid, item.IsBlack)">
      <div class="right-block weui-flex weui-flex__item hold-me">
        <div class="username num_name">{{item.NickName}}</div>
        <div class="right-value weui-flex">
          <div class="weui-flex__item">{{item.Sincerity == 0 ? '' : item.Sincerity + '分'}}</div>
          <div class="weui-flex__item">{{formatNum(item.ToMe * 100)}}%</div>
          <div class="weui-flex__item">{{formatNum(item.ToTa * 100)}}%</div>
        </div>
        <div class="user-attr weui-flex">
          <div class="item" v-if="item.age">{{item.age}}岁</div>
          <div class="item" v-if="item.constellation">{{item.constellation}}座</div>
          <div class="item" v-if="item.cityAttr">{{item.cityAttr}}</div>
        </div>
        <div class="info-num">{{item.Introduction}}</div>
        <div class="right-btns">
          <button class="ac-button black-color" @click.stop.prevent="createBlack(item.openid)">拉黑</button>
          <button class="ac-button add-again" @click.stop.prevent="acceptMakeFriend(item)">接受</button>
        </div>
      </div>
    </div>
    <div class="user-item weui-flex hairline-bottom" v-for="item in sendList" @click="jumpToMB(item.openid)">
      <img src="../img/default-header.png" :data-src="item.HeadImgUrl" @click.stop.prevent="previewImg(item.HeadImgUrl)">
      <div class="right-block weui-flex weui-flex__item hold-him">
        <div class="username num_name">{{item.NickName}}</div>
        <div class="right-value weui-flex">
          <div class="weui-flex__item">{{item.Sincerity == 0 ? '' : item.Sincerity + '分'}}</div>
          <div class="weui-flex__item">{{formatNum(item.ToMe * 100)}}%</div>
          <div class="weui-flex__item">{{formatNum(item.ToTa * 100)}}%</div>
        </div>
        <div class="user-attr weui-flex">
          <div class="item" v-if="item.age">{{item.age}}岁</div>
          <div class="item" v-if="item.constellation">{{item.constellation}}座</div>
          <div class="item" v-if="item.cityAttr">{{item.cityAttr}}</div>
        </div>
        <div class="info-num">{{item.Introduction}}</div>
        <div class="right-btns">
          <button class="ac-button hold-him-color" @click.stop.prevent="removeMakeFriend(item.AddId)">删除</button>
          <button class="ac-button add-again" @click.stop.prevent="refreshMakeFriend(item)">再加</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="initials">
  <ul>
    <li>↑</li>
    <li><img src="../img/068.png"></li>
  </ul>
</div>
<script type="text/javascript" src="../js/tools/weui.js"></script>
<script type="text/javascript" src="../js/tools/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/tools/vue.js"></script>
<script type="text/javascript" src="../js/tools/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!--<script type="text/javascript" src="../js/tools/sort.js"></script>-->
<script type="text/javascript" src="../js/tools/search.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/serviceInterface/serviceInterface.js"></script>
<script type="text/javascript" src="../js/pages/friends.js"></script>
</body>
</html>